<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wrapper" style="width:100px;height:100px;background-color:red;">
        <div class="box" style="width:50px;height:50px;background: green;"></div>
    </div>
    <!-- <script>

        var div = document.getElementsByTagName('div')[0];
        div.onclick = function(e) {
            // console.log(e); // 非IE浏览器

            var event = e || window.event; //兼容IE浏览器
            console.log(event);
        }

    </script> -->

    <script>
        // 事件源对象
        var wrapper = document.getElementsByClassName('wrapper')[0];
        var box = document.getElementsByClassName('box')[0];
        wrapper.onclick = function(e) {

            var event = e || window.event; 
            console.log(event);
            // target: div.box
            // srcElement: div.box 点击绿色方块的结果
            // event对象里面的这两个属性代表的是事件源
            var target = event.target || event.srcElement;
            console.log(target);
        }

    </script>
</body>
</html>